<template>
    <div>
        <h1 :style="{color:$store.state.color}">{{$store.getters.type}}{{$store.state.count}}</h1>
        <button @click='minus'>减少数字</button>

        <input type="text" v-model='todo' @keydown.enter="addTodo">
        <ul>
          <li v-for='item in $store.state.mytodo.todoList' :key='item.id'>
            {{item.value}} <button @click='removeTodo(item.id)'>X</button>
          </li>
        </ul>
    </div>
</template>
<script>
// @ is an alias to /src
import {mapMutations} from 'vuex'
export default {
    name: 'XXX',
    data() {
        return {
          todo:''
        }
    },
    methods: {
        minus(){
          // this.$store.state.count--
          this.$store.commit('changeCount',-5)
        },
        addTodo(){
          // this.$store.commit('mytodo/addTodo',{
          //   id:Math.random(),
          //   value:this.todo
          // })
          this.$store.dispatch('mytodo/addTodoAsync',{
            id:Math.random(),
            value:this.todo
          })
          this.todo = '';
        },
        // ...mapMutations({
        //   qqq:'mytodo/removeTodo'
        // }),
        ...mapMutations('mytodo',['removeTodo']),
        // removeTodo(id){
        //   this.$store.commit('mytodo/removeTodo',id)
        // }
    }
}
</script>
<style lang="less">

</style>